<template>
  <div class="container">
    <div class="main">
      <!-- 头部表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="学科名称">
          <el-input v-model="formInline.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearForm">清楚</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" class="el-icon-edit" @click="addClass"
            >新增学科</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 分割线 -->
      <div class="separate">
        <p><span class="el-icon-info"></span> 共{{ total }}条记录</p>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" max-height="250">
        <el-table-column fixed prop="id" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="name" label="学科名称" width="100">
        </el-table-column>
        <el-table-column prop="time" label="创建日期" width="150">
        </el-table-column>
        <el-table-column prop="isShow" label="前台是否显示" width="150">
        </el-table-column>
        <el-table-column prop="second" label="二级目录" width="100">
        </el-table-column>
        <el-table-column prop="tital" label="标签" width="120">
        </el-table-column>
        <el-table-column prop="count" label="题目数量" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              学科分类
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              学科标签
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              修改
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      total: 2,
      formInline: {
        name: ''
      },
      tableData: [
        {
          id: '2016-05-03',
          name: '王小虎',
          time: '上海',
          isShow: '普陀区',
          second: '2',
          tital: 200333,
          count: 2
        }
      ]
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    clearForm () {
      console.log('clear')
    },
    addClass () {
      console.log('add')
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;
  .main {
    padding: 20px;
    background-color: #fff;
  }
  .separate {
    margin: 20px 0;
    width: 100%;
    height: 30px;
    background-color: #ccc;
    padding-left: 15px;
    border-radius: 5px;
    p {
      font-size: 18px;
      line-height: 30px;
    }
  }
}
</style>
